<template>
  <div>
    <div style="display: flex; justify-content: end">
      <el-button type="primary" icon="plus" style="border-radius: 10px" @click="add"
        >添加
      </el-button>
    </div>

    <CommonDialogForm
      v-model:has-loading="loading"
      v-model:visible="dialogAdd"
      v-model:form-params="addDTO"
      :rules="MenuRules.addRules"
      :item-config="MenuParams.formColumn"
      :title="'添加菜单表'"
      :width="'20%'"
      :submit-text="'保存'"
      :chancel-text="'取消'"
      :is-submit="true"
      :close-tips="true"
      @submit="onAdd"
    >
    </CommonDialogForm>

    <CommonDialogForm
      v-model:has-loading="loading"
      v-model:visible="dialogUpdate"
      v-model:form-params="updateDTO"
      :rules="MenuRules.updateRules"
      :item-config="MenuParams.formColumn"
      :title="'修改菜单表'"
      :width="'20%'"
      :submit-text="'保存'"
      :chancel-text="'取消'"
      :is-submit="true"
      :close-tips="true"
      @submit="onUpdate"
    >
    </CommonDialogForm>

    <CommonTable
      :table-data="menuList"
      :table-column="MenuParams.tableColumn"
      :table-loading="loading"
      :table-attribute="{
        rowKey: 'id',
      }"
      @update="update"
      @remove="remove"
    />
  </div>
</template>

<script setup lang="ts">
//----------------------------------导入区---------------------------------
import { onMounted, reactive, ref } from 'vue'
import type { ResultPageType } from '@/resources/interface/ResultTypes'
import CommonDialogForm from '@/components/CommonDialogForm.vue'
import ObjectUtils from '@/utils/ObjectUtils'
import { MenuApi } from '@/apis/api/menu/MenuApi'
import { MenuParams } from '@/resources/parameters/menu/MenuParameters'
import CommonTable, { type TableColumn } from '@/components/CommonTable.vue'
import type {
  MenuAddDTOType,
  MenuParentTypes,
  MenuSearchDTOType,
  MenuSearchVOType,
  MenuTreeListTypes,
  MenuUpdateDTOType,
} from '@/resources/interface/menu/MenuTypes'
import { MenuRules } from '@/resources/rules/menu/MenuRules'
import ElementUtil from '@/utils/ElementUtil'
import ArrayUtils from '@/utils/ArrayUtils.ts'

//----------------------------------数据区---------------------------------
const loading = ref(false)
const dialogAdd = ref(false)
const dialogUpdate = ref(false)
const searchDTO = reactive<MenuSearchDTOType>({ ...MenuParams.searchDTO })
const searchVO = ref<ResultPageType>()
let addDTO = reactive<MenuAddDTOType>({ ...MenuParams.addDTO })
let updateDTO = reactive<MenuUpdateDTOType>({ ...MenuParams.updateDTO })
const menuList = ref<MenuTreeListTypes[]>([])
// ----------------------------------方法区--------------------------------

const menuTree = async () => {
  loading.value = true
  const result = await MenuApi.getMenuTreeAllApi()
  menuList.value = result.data
  loading.value = false
}

/**
 * 添加 菜单表 前置
 */
const add = async () => {
  await menuParent()
  dialogAdd.value = true
}
/**
 * 添加 菜单表 回调
 * @param params 表单数据
 */
const onAdd = async (params: MenuAddDTOType) => {
  await MenuApi.add(params)
  loading.value = false
  await menuTree()
  ObjectUtils.resetObject(addDTO, MenuParams.addDTO)
}
/**
 * 更新 菜单表 前置
 * @param vo 选中数据
 */
const update = async (vo: MenuSearchVOType) => {
  updateDTO = reactive(ObjectUtils.copy(vo, updateDTO))
  await menuParent()
  dialogUpdate.value = true
}
/**
 * 更新 菜单表 回调
 * @param params 表单数据
 */
const onUpdate = async (params: MenuUpdateDTOType) => {
  await MenuApi.update(params)
  await menuTree()
}
/**
 * 删除 菜单表
 * @param vo 选中数据
 */
const remove = async (vo: MenuSearchVOType) => {
  if (await ElementUtil.openBox({ content: '是否删除,删除后不可恢复！' })) {
    await MenuApi.delete(Array.of(vo.id))
    await menuTree()
  }
}
/**
 * 获取 菜单表 列表
 */
const getList = async () => {
  loading.value = true
  const result = await MenuApi.search(searchDTO)
  searchVO.value = result.data
  loading.value = false
}
/**
 * 获取父节点
 */
const menuParent = async () => {
  const result = await MenuApi.getMenuParentApi()
  const find = MenuParams.formColumn.find((item) => item.field === 'parentId')
  if (find) {
    ArrayUtils.clear(find.options)
    find.options.push({
      label: '顶层',
      value: 0,
    })
    result.data.forEach((item: MenuParentTypes) => {
      find.options.push({
        label: item.name,
        value: item.id,
      })
    })
  }
}

onMounted(() => {
  menuTree()
})
</script>

<style scoped></style>
